import * as React from 'react';
import { DefaultPalette, 
    Stack, 
    IStackStyles,
    IIconProps,
    DefaultButton,
    IStackTokens,
    IStackItemStyles,
    Pivot,
    ICommandBarStyles,
    IButtonStyles,
    IPivotStyles,
    PivotItem
 } from '@fluentui/react';
 import { CommandBar, ICommandBarItemProps } from '@fluentui/react/lib/CommandBar';
 import { IButtonProps } from '@fluentui/react/lib/Button';
 import { setVirtualParent } from '@fluentui/dom-utilities';
 import { initializeIcons } from '@fluentui/react/lib/Icons';
 import { FileList } from './FileList.tsx';
 import './ProvitTeam.css';
 
// Non-mutating styles definition
const stackItemStyles: IStackItemStyles = {
  root: {
    alignItems: 'center',
    backgroundImage:'linear-gradient(to right,#f0f0f0, #f0f0f0 96%, #e3e3e3)',
    display: 'flex',
    flex:'none',
    width:250,
    justifyContent: 'center',
    overflow: 'hidden',
  },
};
const nonShrinkingStackItemStyles: IStackItemStyles = {
  root: {
    alignItems: 'center',
    background:'#f5f5f5',
    display: 'flex', 
    justifyContent: 'center',
    overflow: 'hidden', 
  },
};
const rl_stack_styles:IStackStyles = {
    root: {
      background:'transparent',
      overflow: 'hidden',
      width:'100%',
      borderBottom:'solid 1px #ebebeb',
    },
};
const rl_stack_v_styles:IStackStyles = {
    root: {
      background:'transparent',
      overflow: 'hidden',
      width:'100%',
      height:'100%', 
      padding:'0px 10px',
    },
};
const vedioButtonStyles:Partial<IButtonStyles>={
    root:{
        borderRadius:'5px',
        borderColor:'#d1d1d1',
    }
}
const rl_stackitem_styles: IStackItemStyles = {
    root: {
      alignItems: 'center', 
      display: 'flex',
      flex:'1',
      height:60,
      justifyContent: 'center',
      overflow: 'hidden',
    },
  };
const rl_stackitem_vedio_styles: IStackItemStyles = {
    root: {
      alignItems: 'center', 
      display: 'flex',
      flex:'none',
      width:150,
      height:60,
      justifyContent: 'center',
      overflow: 'hidden',
    },
  };

const innerStackTokens: IStackTokens = {
  childrenGap: 0,//子元素之间的间隙
  padding: 0,//padding
};
 
const pivotStyles:Partial<IPivotStyles>={
    root: {
        backgroundColor:'#f5f5f5',
   },
    link:{  
        padding:'5px',
        height:60,
        fontSize:14,
        color:'#616161',
    },
}
const videoIcon: IIconProps = { iconName: 'Video' };

const commandButtonStyls:Partial<ICommandBarStyles>={
    root:{
        padding:'0px',
        background:'transparent',
        borderBottom:'solid 1px #e0e0e0',
    },
}


export const ProvitTeam: React.FunctionComponent = () => {
  const [stackWidth, setStackWidth] = React.useState<number>(100);
  initializeIcons();
  // Mutating styles definition
  const stackStyles: IStackStyles = {
    root: {
      background:'transparent',
      overflow: 'hidden',
      width: `${stackWidth}%`,
    },
  };

  return (
    <Stack horizontal styles={stackStyles} tokens={innerStackTokens}>
        <Stack.Item grow styles={stackItemStyles}> 
            <Stack>
                <Stack.Item>
                    团队
                </Stack.Item>
                <Stack.Item></Stack.Item>
                <Stack.Item>
                    管理团队
                </Stack.Item>
            </Stack>
        </Stack.Item>
        <Stack.Item grow disableShrink styles={nonShrinkingStackItemStyles}>
            <Stack styles={rl_stack_v_styles} tokens={innerStackTokens}>
                <Stack.Item>
                    <Stack styles={rl_stack_styles} horizontal tokens={innerStackTokens}>
                        <Stack.Item styles={rl_stackitem_styles} grow >
                            <Pivot styles={pivotStyles} className='team_header' aria-label="团队资源">
                                <PivotItem headerText="帖子">
                                </PivotItem>
                                <PivotItem headerText="文件">
                                </PivotItem>
                                <PivotItem headerText="Wiki">
                                </PivotItem>
                            </Pivot>
                        </Stack.Item>
                        <Stack.Item  grow styles={rl_stackitem_vedio_styles} >
                            <DefaultButton styles={vedioButtonStyles} toggle  text='会议' iconProps={videoIcon} allowDisabledFocus/>
                        </Stack.Item>
                    </Stack>
                </Stack.Item>
                <Stack.Item>
                <CommandBar className={'rtlCommandBar'} styles={commandButtonStyls}
                        items={rl_menu_items}
                        overflowItems={rl_menu_overflowItems}
                        overflowButtonProps={overflowProps}
                        farItems={rl_menu_farItems}
                        ariaLabel="Inbox actions"
                        primaryGroupAriaLabel="Email actions"
                        farItemsGroupAriaLabel="More actions"
                    />
                </Stack.Item>
                <Stack.Item>
                    <FileList></FileList>
                </Stack.Item>
            </Stack>
        </Stack.Item>
    </Stack>
  );
};

const overflowProps: IButtonProps = { ariaLabel: 'More commands' };
const rl_menu_items: ICommandBarItemProps[] = [
    {
      key: 'newItem',
      text: '新建',
      cacheKey: 'myCacheKey', // changing this key will invalidate this item's cache
      iconProps: { iconName: 'Add' },
      subMenuProps: {
        items: [
          {
            key: 'emailMessage',
            text: '邮件 消息',
            iconProps: { iconName: 'Mail' },
            ['data-automation-id']: 'newEmailButton', // optional
          },
          {
            key: 'calendarEvent',
            text: '日历 事件',
            iconProps: { iconName: 'Calendar' },
          },
        ],
      },
    },
    {
      key: 'upload',
      text: '上传',
      iconProps: { iconName: 'Upload' },
      subMenuProps: {
        items: [
          {
            key: 'uploadfile',
            text: 'File',
            preferMenuTargetAsEventTarget: true,
            onClick: (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined) => {
              ev?.persist();
  
              Promise.resolve().then(() => {
                const inputElement = document.createElement('input');
                inputElement.style.visibility = 'hidden';
                inputElement.setAttribute('type', 'file');
  
                document.body.appendChild(inputElement);
  
                const target = ev?.target as HTMLElement | undefined;
  
                if (target) {
                  setVirtualParent(inputElement, target);
                }
  
                inputElement.click();
  
                if (target) {
                  setVirtualParent(inputElement, null);
                }
  
                setTimeout(() => {
                  inputElement.remove();
                }, 10000);
              });
            },
          },
          {
            key: 'uploadfolder',
            text: 'Folder',
            preferMenuTargetAsEventTarget: true,
            onClick: (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined) => {
              ev?.persist();
  
              Promise.resolve().then(() => {
                const inputElement = document.createElement('input');
                inputElement.style.visibility = 'hidden';
                inputElement.setAttribute('type', 'file');
  
                (inputElement as { webkitdirectory?: boolean }).webkitdirectory = true;
  
                document.body.appendChild(inputElement);
  
                const target = ev?.target as HTMLElement | undefined;
  
                if (target) {
                  setVirtualParent(inputElement, target);
                }
  
                inputElement.click();
  
                if (target) {
                  setVirtualParent(inputElement, null);
                }
  
                setTimeout(() => {
                  inputElement.remove();
                }, 10000);
              });
            },
          },
        ],
      },
    },
    {
        key: 'sync',
        text: '同步',
        iconProps: { iconName: 'SyncToPC' },
        onClick: () => console.log('SyncToPC'),
    },
    {
        key: 'share',
        text: '复制链接',
        iconProps: { iconName: 'Share' },
        onClick: () => console.log('Share'),
    },
    {
      key: 'download',
      text: '下载',
      iconProps: { iconName: 'Download' },
      onClick: () => console.log('Download'),
    },
    {
      key: 'addcloud',
      text: '添加云存储',
      iconProps: { iconName: 'CalculatorAddition' },
      onClick: () => console.log('CalculatorAddition'),
    },
  ];
  
  const rl_menu_overflowItems: ICommandBarItemProps[] = [
    { key: 'move', text: '移动到...', onClick: () => console.log('Move to'), iconProps: { iconName: 'MoveToFolder' } },
    { key: 'copy', text: '复制到...', onClick: () => console.log('Copy to'), iconProps: { iconName: 'Copy' } },
    { key: 'rename', text: '重命名', onClick: () => console.log('Rename'), iconProps: { iconName: 'Edit' } },
  ];
  
  const rl_menu_farItems: ICommandBarItemProps[] = [
    {
      key: 'tile',
      text: 'Grid view',
      // This needs an ariaLabel since it's icon-only
      ariaLabel: 'Grid view',
      iconOnly: true,
      iconProps: { iconName: 'Tiles' },
      onClick: () => console.log('Tiles'),
    },
    {
      key: 'info',
      text: 'Info',
      // This needs an ariaLabel since it's icon-only
      ariaLabel: 'Info',
      iconOnly: true,
      iconProps: { iconName: 'Info' },
      onClick: () => console.log('Info'),
    },
  ];